<!--
 * @Description: 市属灌区水利用率
-->

<template>
  <div class="areas-monthly-water-intake">
    <a-card size="small">
      <template #title>
        <div class="title">
          <slot name="title"><InsertRowAboveOutlined :style="{ fontSize: '18px', color: token.colorPrimary }" /></slot>
          <span class="smart-margin-left10">市属灌区水利用率</span>
        </div>
      </template>

      <div class="echarts-box">
        <div class="municipal-water-utilization-rate-main" id="municipal-water-utilization-rate-main"></div>
      </div>
    </a-card>
  </div>
</template>
    <script setup>
import * as echarts from 'echarts';
import { onMounted, ref, computed } from 'vue';
import { theme } from 'ant-design-vue';
import myEchartsTheme from '/@/utils/echartsTheme.js';
import { dictApi } from '/src/api/support/dict-api';

const { useToken } = theme;
const { token } = useToken();
const color = computed(() => {
  return token.colorPrimary;
});

const dictValueList = ref([])

onMounted(() => {
  queryDict()
  setTimeout(() => {
    init();
  }, 1000);
});
async function queryDict() {
    let res = await dictApi.valueList('historical_utilization_rate');
    dictValueList.value = res.data;
  }
function init() {
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['市属灌区'],
      orient: 'vertical',
      left: 'right',
      top: 10,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: ['曹店灌区', '麻湾灌区', '胜利灌区', '王庄灌区', '垦东灌区'],
      },
    ],
    yAxis: {
      name: '水利用率(%)',
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
    series: [
      {
        name: '前五年平均利用率',
        type: 'bar',
        data: [],
        // smooth: true
      },
      {
        name: '本年度水资源利用率',
        type: 'bar',
        data: [],
        // smooth: true
      },
    ],
  };


  option.series[0].data = dictValueList.value.map(item=>{
    return item.valueCode
  });
  option.series[1].data = dictValueList.value.map(item=>{
    return item.valueName
  });
  var myChart = echarts.init(document.getElementById('municipal-water-utilization-rate-main'), myEchartsTheme);
  myChart.setOption(option);
}
</script>
    <style lang="less" scoped>
.areas-monthly-water-intake {
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .municipal-water-utilization-rate-main {
      width: 100%;
      height: 300px;
      background: #fff;
    }
  }
  .title {
    display: flex;
    align-items: center;
    &::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 0;
      width: 3px;
      height: 30px;
      background-color: v-bind('token.colorPrimary');
    }
  }
}
</style>
    